<template>
    <div class="keppel">
        <div class="prize">
            <img src="http://assets.rurushishi.com/activies/tjkeppel/prize.png" alt="">
        </div>
        <div class="frame">
            <span>红包礼包</span>
            <span class="recive">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/recive.png" alt="" v-show="isrecive1">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/noRecive.png" alt="" v-show="!isrecive1" @click="hb">
            </span>
        </div>
        <div class="frame">
            <span>话费礼包</span>
            <span class="recive">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/recive.png" alt="" v-show="isrecive2">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/noRecive.png" alt="" v-show="!isrecive2" @click="fare">
            </span>
        </div>
        <div class="frame">
            <span>京东卡</span>
            <span class="recive">
                <em v-show="isrecive3">{{this.awardCode}}<i v-if="writeoff"></i></em>
                <img src="http://assets.rurushishi.com/activies/tjkeppel/noRecive.png" alt="" v-show="!isrecive3" @click="jdCard">
            </span>
        </div>
        <div class="return">
            <img src="http://assets.rurushishi.com/activies/tjkeppel/return.png" alt="" @click="returns">
        </div>
        <music></music>
        <share :isshare="isshare"></share>
        <!-- <Bottom :baseText="baseText"></Bottom> -->
    </div>
</template>
<script>
import Cookies from "js-cookie";
import { MessageBox } from "mint-ui";
import request from "@/utils/request";
import * as config from "./config";
import music from "./components/music";
import Share from "@/components/common/Share";
// import Bottom from "@/components/common/Bottom";
export default{
    data(){
        return{
            openid: Cookies.get('openid'),
            isrecive1: false,
            isrecive2: false,
            isrecive3: false,
            saveInfo:{
                channel:'',
                nickname: '',
                openid: Cookies.get('openid'),
                reOpenid: '',
                headImg: '',
                six: '',
            },
            userInfo: null,
            // 接收到的传播信息
            receiveSpreadInfo: {
                channel: 0, //渠道
                fuid: "", //传播者的openid
                ouid: "" //销售或渠道的openid
            },
            isshare: false,//是否分享
            // baseText: config.BASE_TEXT,
            isplay: false,
            sJoinfos:false,
            awardCode: '3333',
            writeoff: false
        }
    },
    components:{
        share: Share,
        // Bottom: Bottom,
        music: music
    },
    methods:{
        hb(){
            // let _self= this;
            // _self.isshare = false;
            // _self.$nextTick(() => {
            //      _self.isshare = true;
            // });
            MessageBox.alert("您的任务还未达成，快去完成吧！具体详情请查看“活动规则”。")
        },
        fare(){
            // let _self= this;
            // _self.isshare = false;
            // _self.$nextTick(() => {
            //      _self.isshare = true;
            // });
            MessageBox.alert("您的任务还未达成，快去完成吧！具体详情请查看“活动规则”。")
            // MessageBox.alert("参与活动或首次给好友投票将有机会获得至多200元的随机话费！具体详情请查看“活动规则”", "提示")
        },
        jdCard(){
            // let _self= this;
            // _self.isshare = false;
            // _self.$nextTick(() => {
            //      _self.isshare = true;
            // });
            MessageBox.alert("获奖名单将于5.28日在微信公众号“吉宝置业天津”公布，请您关注哦！")
            // MessageBox.alert("参加活动，邀请好友助力将有机会获得2000元的“京东卡”具体详情请查看“活动规则”", "提示")
        },
        // 是否参加过活动
        isJoinfo(){
            let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userJoinfo`,
                {
                //    openid: _self.saveInfo.openid,
                }).then(function(data){
                    if(!data.data){
                        //没有参加过活动
                         _self.isJoinfos = false;
                         _self.init();
                    }else{
                       _self.isJoinfos = true; //参加过活动
                       _self.init();
                    } 
                });
        },
        //获取用户的奖品列表 activity/logic/userPrize
        userPrize(){
            let _self = this;
            request
                .get(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userPrize`,
                    {}
                )
                .then(function(data) {
                    if(data.code==0){
                        if(!data.data){
                           
                        }else{
                            data.data.forEach((v, i) => {
                                if(v.prizeCode =='prize_1'){
                                    _self.isrecive1 = true;
                                }
                                if(v.prizeCode =='prize_3'){
                                    _self.isrecive2 = true;
                                }
                                if(v.prizeCode =='prize_4'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                                if(v.prizeCode =='prize_5'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                                if(v.prizeCode =='prize_6'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                                if(v.prizeCode =='prize_7'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                                if(v.prizeCode =='prize_8'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                                if(v.prizeCode =='prize_9'){
                                    _self.isrecive2 = true;
                                    _self.awardCode = v.awardCode;
                                    if(v.isAwarded==1){
                                        _self.writeoff = true
                                    }
                                }
                            });
                        }
                    }
            });
        },
        //返回首页
        returns(){
          this.pushUrl('index')
        },
        pushUrl(page) {
            // 带上本页面的传播信息
            let url = "";
            let fullPathNoShare = this.$route.fullPath;
            fullPathNoShare = fullPathNoShare.replace("?personal=2", "");
            fullPathNoShare = fullPathNoShare.replace("&personal=2", "");
            fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
            fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
            if (fullPathNoShare.indexOf("?") > -1) {
                url = page + "?" + fullPathNoShare.split("?")[1];
            } else {
                url = page;
            }
            this.$router.push("/" + url);
        },
         shareCallBack(){
            let _self = this;
            let query={
                        channel: _self.saveInfo.channel,
                        openid : _self.saveInfo.openid,
                        prizeCode: 'prize_1',
                        referenceOpenid: _self.saveInfo.reOpenid
                    };
            let obj = JSON.stringify(query); 
            request
                .post(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/share`,
                    obj,{needDealEx:false}
                )
                .then(function(data) {
                    if(data.code==0){
                        this.isshare=false;
                    }
            });
       },
       init() {
            let that = this;
            // 设置传播信息
            if (this.$route.query.channel)
                this.receiveSpreadInfo.channel = this.$route.query.channel;
                this.saveInfo.channel = this.$route.query.channel;
            if (this.$route.query.fuid)
                this.receiveSpreadInfo.fuid = this.$route.query.fuid;
                this.saveInfo.reOpenid = this.$route.query.fuid;
            if (this.$route.query.ouid)
                this.receiveSpreadInfo.ouid = this.$route.query.ouid;
            if (this.$route.query.isshare) that.isshare = true;
            config.getUserInfo().then(function(userInfo) {
                console.log(userInfo)
                that.userInfo = userInfo;
                // 设置分享 标题 链接 回调
                let shareObj = {
                    title: "",
                    link: ""
                };
                if (
                that.userInfo &&
                that.userInfo.user &&
                that.userInfo.user.nickname
                ) {
                that.saveInfo.nickname = that.userInfo.user.nickname;
                that.saveInfo.six = that.userInfo.user.six;
                that.saveInfo.headImg = that.userInfo.user.headimgurl;
                shareObj.title = `${
                    that.userInfo.user.nickname
                }520告白日｜怦然心动，你的“美”一刻”`;
                }

                if (that.userInfo.salerOrAgent&&that.isJoinfos) {
                // 是销售或者渠道,更新ouid
                shareObj.link = `${config.SHARE_LINK}?channel=${
                    that.receiveSpreadInfo.channel
                }&fuid=${that.openid}&ouid=${that.openid}`;
                } else if(!that.isJoinfos){ //没有参加活动直接分享的
                     shareObj.link = `${config.SHARE_NOJOIN_LINK}?channel=${
                    that.receiveSpreadInfo.channel
                }&fuid=${that.openid}${
                    that.receiveSpreadInfo.ouid
                    ? "&ouid=" + that.receiveSpreadInfo.ouid
                    : ""
                }`;   
                }else {
                shareObj.link = `${config.SHARE_LINK}?channel=${
                    that.receiveSpreadInfo.channel
                }&fuid=${that.openid}${
                    that.receiveSpreadInfo.ouid
                    ? "&ouid=" + that.receiveSpreadInfo.ouid
                    : ""
                }`;
                }
                config.initShare(shareObj);
                that.global.SHARE_CALLBACK_OK = function(type) {
                that.shareCallBack();
                };
            });   
        }
    },
    created(){
        this.isJoinfo();
        this.userPrize();
        // this.init();
    }
}
</script>
<style lang="stylus" scoped>
.keppel{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    width 100%
    height 100%
    background url(http://assets.rurushishi.com/activies/tjkeppel/prize.jpg) no-repeat
    background-size 100% 100%
}
.frame{
    width 5.3rem
    height 1.45rem
    margin .2rem auto
    background url(http://assets.rurushishi.com/activies/tjkeppel/frame.png) no-repeat
    background-size 100% 100%
    display flex
    justify-content space-around
    line-height 1.45rem
}
.frame>span{
    display block
}
.frame .recive>img{
    width .94rem
    height .45rem
}
.prize{
    width 100%
    text-align center
    padding-top 1rem
    margin 0 auto
    padding-bottom .5rem
}
.prize>img{
    width 2.7rem
    height .86rem
}
em{
    display inline-block
    line-height 1.45rem
    text-align center
    padding-left .2rem
    font-weight 600
    position relative
}
em>i{
    position: absolute;
    top: 0.7rem;
    width: 1.4rem;
    height: 2px;
    background-color: #f63173;
    left: 0%;
}
.return{
    width 100%
    padding  .3rem 0
    text-align center
}
.return>img{
    width 3.14rem
    height .93rem
}
</style>

